<template>
  <div class="main" @click="goBack" >
     <div class="body1" @click.stop>
       <div class="box1">
         <div class="username" >用户名：</div>
         <input type="text" placeholder="请输入是手机号或邮箱" class="name" v-model="username">
       </div>
       <div class="box2">
         <div class="psword" >密 码：</div>
         <input type="password" class="pass" v-model="password">
       </div>
       <div class="box3">
         <div class="check">验证码：</div>
         <input type="text" class="word" v-model="checkword">
         <p @click="change">{{word}}</p>
     </div>
       <div class="button" @click="makeSure">确定</div>
     </div>
  </div>
</template>
<script>
  export default {
    name: 'OnloadMain',
    data () {
      return {
        username: '',
        password: '',
        checkword: '',
        word: ''
      }
    },
    mounted () {
      this.getCheckWord()
    },
    methods: {
      getCheckWord () {
        const result= [];
        for (var i=0;i<4;i++){
          const num = Math.floor(Math.random()*9);
          result.push(num)
        }
       return this.word = result.join("");
      },
      change () {
        this.getCheckWord()
      },
      makeSure () {
       if((this.username==='')|| (this.password==='')||(this.checkword==='')|| (this.checkword !== this.word)){
        // if(this.checkword !== this.word){
          alert("填写信息有误，请重新填写");
         this.getCheckWord()
        } else {
          alert("登录成功");
          this.$router.push('/')

        }
      },
      goBack () {
        this.$router.push('/shopping')
      }
    }
  }
</script>
<style scoped>
  .main {
    width:100%;
    height:100%;
    background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2215300336,3071589233&fm=200&gp=0.jpg) center no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;

  }
  .body1 {
    position:relative;
    top:50%;
    left: 50%;
    height: 200px;
    width: 350px;
    margin-left: -175px;
    margin-top: -100px;
    background-color: white;
    box-shadow: 1px 1px 2px #cccccc;
    border-radius: 20px;
  }
  .body1 .box1 {
    position: absolute;
    top:0;
    left: 0;
  }
  .body1 .box2 {
    position: absolute;
    top:60px;
    left: 0;
  }
  .body1 .box3 {
    position: absolute;
    top:90px;
    left: 0;
  }
  .username {
    margin: 22px 0 8px 10px;
    font-size: 20px;
    display: inline-block;
  }
  .psword {
    margin-left: 23px;
    margin-bottom: 10px;
    font-size: 20px;
    display: inline-block;

  }
  .name,.pass{
    display: inline-block;
    border: 1px solid blue;
    height: 20px;
  }
  .word {


    display: inline-block;
    border: 1px solid blue;
    height: 20px;
    width: 50px;
  }
  .check {

    margin-left: 10px;
    font-size: 20px;
    display: inline-block;
    margin-bottom: 10px;
  }
  .check input {
    display: inline-block;
    border: 1px solid blue;
    height: 20px;
    padding-left: 5px;
  }
  .main p {
    height: 40px;
    width: 60px;
    background-color: #7e8c8d;
    color: white;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    margin-left: 20px;
  }
  .main .button {
    width: 90px;
    height: 40px;
    background-color: orangered;
    color: white;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    border-radius: 40px;
    position: absolute;
    left: 50%;
    margin-left: -45px;
    bottom: 12%;
  }
</style>
